<template>
	<view>
		<view class="fixed bg-FFFFFF">
			<custom>
				<view slot="left" @tap.stop="clear">
					<view
						style="margin-left: 10rpx;;width: 622rpx;height: 80rpx;border-radius: 40rpx;background-color: #f8f8f8;"
						class="flex flex-y-center">
						<view class="iconfont icon-sousuo1 ml-30 color-666666"></view>
						<input v-model="keyword" @blur="search" @confirm="search" type="text" class="flex-1 fs-28 ml-24"
							placeholder-class="font" placeholder="请输入商品关键词">
					</view>
				</view>
			</custom>

			<scroll-view :scroll-left="get_left" :scroll-with-animation="true" :scroll-x="true"
				v-if="tabs_list.length>0" class="bg-FFFFFF no-scroll w-688"
				style="overflow-x:scroll;margin-left: 40rpx;">
				<tabs ref="tabs" @change="tab_change" :index="tabs_index" :scroll="true" :list="tabs_list"></tabs>
			</scroll-view>



		</view>

		<view class="w-688 ml-31">
			<list :list="list" :mode="list_type"></list>
		</view>

		<qq-footer :show="is_null" :list="list"></qq-footer>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs_list: [],
				list: [],
				page: 1,
				is_null: true,
				keyword: '',
				tabs_index: 0,
				list_type: 1,
			}
		},
		computed: {
			get_left() {
				if (this.tabs_index > 3) {
					return 35 * this.tabs_index;
				}
				return 0;
			},
		},
		onLoad(e) {
			if (e.index) {
				this.tabs_index = Number(e.index);
			}
			if (e.keyword) {
				this.keyword = e.keyword;
			}
			if (e.type) {
				this.list_type = e.type;
			}
			this.tabs_list = uni.getStorageSync('sort') || [];
			this.get_sort();
			this.init();

		},
		onReachBottom() {
			this.get_list(this.page);
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},


		methods: {
			tab_change(index) {
				this.tabs_index = index;
				this.init();
			},
			search() {
				this.click(() => {

					this.$refs.tabs.tab_index = 0;
					this.tabs_index = 0;
					this.init();

				});
			},
			get_sort() {
				this.request({
					url: "/goods/goodsType",
				}).then(res => {
					if (res.status == 200) {
						this.tabs_list = res.data || this.tabs_list;

					}
				});
			},
			get_type() {
				if (this.tabs_list.length > 0 && this.tabs_index > -1) {
					if (this.tabs_index <= this.tabs_list.length) {
						return this.tabs_list[this.tabs_index].id;
					}
				}
				return '';
			},
			init() {
				this.setData({
					page: 1,
					list: [],
					is_null: false,
				})
				this.get_list();
			},
			get_list(page = 1) {
				let data = {
					page: page,
					keyword: this.keyword,
					productType: this.list_type == 2 ? 1 : '',

				}
				if (this.get_type()) {
					data.goodsType = this.get_type();
				}
				// if (this.user_info.id) {
				// 	data.userId = this.user_info.id;
				// }
				this.request({
					url: '/goods',
					data,
					loading: page == 1,
				}).then(res => {

					if (res.status == 200) {
						if (res.data?.content) {
							res.data.content.forEach(val => {
								if (val.headPortrait) {
									val.headPortrait = val.headPortrait.split(',')[0]
								}
							})
						}
						this.list = this.list.concat(res.data?.content || []);

						if (res.data?.content?.length == 0) {
							this.is_null = true;
						} else {
							this.page++;
						}
					}
				});
			},
		},

	}
</script>

<style>

</style>
